<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>权限列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/scroll-bar.css">
    <link rel="stylesheet" href="../css/sub-page.css">
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../lib/nprogress/nprogress.css">
</head>

<body>
    <div class="ok-body">
        <!--面包屑导航区域-->
        <div class="ok-body-breadcrumb">
            <span class="layui-breadcrumb">
                <a><cite>首页</cite></a>
                <a><cite>系统管理</cite></a>
                <a><cite>权限列表</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
                <i class="layui-icon layui-icon-refresh"></i>
            </a>
        </div>
        <!--数据表格-->
        <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
        <input class="layui-hide" id='guestid' value="">
    </div>
    <!--js逻辑-->
    <script src="../lib/layui/layui.js"></script>
    <script src="../lib/nprogress/nprogress.js"></script>
    <script>
        NProgress.start();
    window.onload = function () {
        NProgress.done();
    }

    layui.config({
        base: '../lib/layui/lay/modules/'
    }).extend({
        treetable: 'treetable/treetable'
    }).use(['element', 'table', 'form', 'jquery', 'treetable'], function () {
        var element = layui.element;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;
        var treetable = layui.treetable;


        layer.load(2);
        table.render({
            id:'permisstion_table',
            elem: '#tableId',
            cellMinWidth: 80,
            url: '/menu/list',
            page: false,
            limit:100,
            where:{guestid:$('#guestid').val()},
            cols: [[
                {type: 'numbers'},
                {field: 'parentname', title: '菜单分类'},
                {field: 'menuname', title: '权限名称'},
                {field: 'url', title: '菜单url'},
                {field: 'showorder', width: 80, align: 'center', title: '排序号'},
                {
                    field: 'parentid', width: 80, align: 'center', templet: function (d) {
                        if (d.parentId == 0) {
                            return '<span class="layui-badge layui-bg-blue">目录</span>';
                        } else {
                            return '<span class="layui-badge-rim">菜单</span>';
                        }
                    }, title: '类型'
                },
                {templet: '#statusTpl', width: 120, align: 'center', title: '状态'}
            ]],
            done: function (res, curr, count) {
                layer.closeAll('loading');
            }
        });
          //监听状态操作
          form.on('switch(status_switch)', function(obj){
            layer.msg(this.value+ ' ' + this.name + '：'+ obj.elem.checked);
            
            
            $.ajax({
                    url: '/menu/permissionchange',
                    method: 'post',
                    data: {userid:$('#guestid').val(),status:obj.elem.checked?1:0,menuid:this.value},
                    dataType: 'JSON',
                    success: function (res) {
                        console.log(res);
                        if (res.code == 1) {
                            layer.msg('权限操作成功');
                        } else {
                            layer.msg('权限操作失败');
                            obj.elem.checked=!obj.elem.checked;
                        }
                    },
                    error: function (data) {}
                })
                
        });   
    })
</script>


    <!--模板-->
    <script type="text/html" id="statusTpl">
        <input type="checkbox" name="status" value="{{d.menuid}}" lay-filter='status_switch' lay-skin="switch" lay-text="启用|停用" {{ d.checked==0 ? '' : 'checked'}}>
</script>
</body>

</html>